<template>
  <!-- APP风险分析 -->
  <div class="chart-container" id="home2" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {
  getAppCheckCount,
  getAppRiskCount,
  getUserAppNum,
  getWarnList,
} from "@/api/applicationService/applicationScreen.js";
export default {
  name: '',
  data() {
    return {
      chart: null,
      trafficWay:[],
    };
  },
  mounted() {
    getAppRiskCount().then(res=>{
      this.trafficWay=res.data||[]
      this.initChart2()
    })
    // let that = this;
    // setTimeout(function () {
    //   that.initChart2();
    // }, 0)
  },

  methods: {
    /**
     * 初始化图表2
     */
    initChart2() {
      var chartDom = document.getElementById('home2');
      var myChart = echarts.init(chartDom);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      var option;
      // const trafficWay = [
      //   {value: 1015, name: 'WIFI热点信息'},
      //   {value: 2043, name: '通讯录信息'},
      //   {value: 3043, name: '位置信息'},
      //   {value: 4043, name: '短信信息'},
      //   {value: 5043, name: '基站信息'}
      // ];
      const trafficWay=this.trafficWay
      let sum = trafficWay.reduce((cur, pre) => {
        return cur + pre.value;
      }, 0);
      
      let data = [];
      let legendData = [];
      var color = [
        '#00ffff',
        '#409B5C',
        '#006ced',
        '#ffe000',
        '#ffa800',
        '#ff5b00',
        '#ff3000'
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        let name = trafficWay[i].name + '  ' + trafficWay[i].value;
        legendData.push(name);
        data.push(
          {
            value: trafficWay[i].value,
            name: name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 10,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i]
            }
          },
          {
            value: sum / 100, // 控制每个环形之间的间隙
            name: '',
            itemStyle: {
              label: {
                show: true
              },
              labelLine: {
                show: true
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        );
      }
      let seriesOption = [
        {
          name: '',
          type: 'pie',
          clockwise: false,

          radius: ['45%', '65%'],
          center: ['51%', '57%'],
          emphasis: {
            scale: false
          },
          labelLine: {
            show: true,
            length2: 1,
          },
          label: {
            textStyle: {
              color: '#fff',
              fontWeight: 'bolder',
              fontSize: 12,

            },
            show: true
          },
          data: data
        }
      ];
      option = {
        title: {
          subtext: sum,
          textStyle: {
            color: '#19E1E3',
            fontSize: 25,

          },
          subtextStyle: {
            fontSize: 25,
            fontWeight: 'bolder',
            color: '#19E1E3'
          },
          x: '45%',
          y: '46%'
        },

        color: color,
        tooltip: {
          show: false
        },
        legend: {
          icon: 'rect',
          itemWidth: 16,
          itemHeight: 8,
          show: false,
          itemStyle: {
            borderWidth: 3,
          },
          orient: 'vertical',
          data: legendData,
          right: '10%',
          top: 'center',
          align: 'left',
          textStyle: {
            color: '#fff',
            fontWeight: 'bolder',
            fontSize: 17,
            padding: [0, 0, 0, 10]
          },
          itemGap: 20
        },

        grid: {
          top: 10,
          // left: '10%',
          // right: '10%',
          // bottom: '10%',
        },
        toolbox: {
          show: true
        },
        series: seriesOption
      };
      option && myChart.setOption(option);

    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
